<template>
	<view class="com-alert-pop" v-if="alertShow">
		<view class="mask" v-if="alertShow" @click.stop="cancleAlert"></view>
		<view class="popup-alert" :class="alertShow?'popup-active':''">
			<view class="title">筛选</view>
			<view class="close-btn" @click.stop="cancleAlert">
				<text class="yyfont yy-guanbi"></text>
			</view>
			<view class="fun-box">
				<view class="fun-title">时间范围</view>
				<view class="fun-list">
					<view class="fun-list-item" v-for="(item,index) in timesArray">
						<view class="item-btn" :class="timeScope == item.val?'active':''" @click="clickTime(item.val)">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="fun-title">问诊类型</view>
				<view class="fun-list">
					<view class="fun-list-item" v-for="(item,index) in typeArray">
						<view class="item-btn" :class="askType == item.val?'active':''" @click="clickAsk(item.val)">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Stream
	} from 'stream'
	export default {
		name: 'listFilter',
		props: {
			alertShow: {
				type: Boolean,
				default: false,
			},
			/**
			 * 0-全部  1-今日  2-本周
			 */
			timeScope: {
				type: Number | String,
				default: 0
			},
			/**
			 * 3-全部  1-普通  2-视频
			 */
			askType: {
				type: Number | String,
				default: 3
			}
		},
		data() {
			return {
				timesArray: [{
					'title': '全部',
					'val': 0
				}, {
					'title': '今日',
					'val': 1
				}, {
					'title': '本周',
					'val': 2
				}],
				typeArray: [{
					'title': '全部',
					'val': 3
				}, {
					'title': '普通问诊',
					'val': 1
				}, {
					'title': '视频问诊',
					'val': 2
				}],
			}
		},
		methods: {
			cancleAlert() {
				this.$emit('cancleAlert')
			},
			clickTime(val){
				this.$emit('cancleAlert')
				this.$emit('changeTime',val)
				console.log("rk===>[time-v]" + val);
			},
			clickAsk(val){
				this.$emit('cancleAlert')
				this.$emit('changeType',val)
				console.log("rk===>[type-v]" + val);
			}
		}
	}
</script>

<style lang="scss">
	.popup-alert {
		position: fixed;
		bottom: 0;
		left: 0%;
		z-index: 1001;
		width: 750rpx;
		padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
		background-color: #ffffff;
		opacity: 0;
		line-height: 1;
		text-align: center;
		color: #282828;

		.title {
			max-width: 90%;
			margin-right: auto;
			margin-left: auto;
			font-weight: bold;
			font-size: 32rpx;
			line-height: 100rpx;
		}
		.close-btn {
			position: absolute;
			right: 0;
			top: 0;
			padding: 30rpx;
			color: #969696;
		}


	}

	.popup-active {
		opacity: 1;
	}

	.fun-box {
		padding-bottom: 100rpx;
		.fun-title {
			display: flex;
			font-weight: bold;
			padding: 50rpx 30rpx;
		}

		.fun-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			padding: 0 30rpx;
			.fun-list-item {
				width: calc((100% - 60rpx) * 0.333);
				display: flex;
				justify-content: center;
				align-items: center;
				.item-btn {
					background-color: #f3f4f5;
					border: 1px solid #f3f4f5;
					width: 90%;
					color: #323232;
					padding: 30rpx;
					border-radius: 10rpx;
				}
				.active {
					background-color: $yy-main-light-col;
					border: 1px solid $yy-main-col;
				}
			}
		}
	}
</style>
